<template>
  <div class="container">
    <mt-header fixed title="出差日程">
      <router-link :to="{name:'businessTrip'}" slot="right">
        关闭
      </router-link>
    </mt-header>
    <div class="header">
      <h2 class="title" v-text="formateDate(businessTrip.tripDate)"></h2>
      <div class="trip-time">
        <span class="time-text" v-text="businessTrip.tripDay + '(天)'"></span>
      </div>
    </div>
    <div class="content">
      <div class="cell">
        <label>出访人员</label>
        <span v-text="businessTrip.tripper"></span>
      </div>
      <div class="cell">
        <label>出访地点</label>
        <span v-text="businessTrip.tripPlace"></span>
      </div>
      <div class="cell">
        <label>详细日程</label>
        <span v-if="null === businessTrip.detailedSchedule">
          暂时没有详细日程
        </span>
        <span v-else>
          <a @click="viewFile(1)" class="view-file">
            <i class="fa fa-search"></i>
            点击查看</a>
        </span>
      </div>
      <div class="cell">
        <label>出差报告</label>
        <span v-if="null === businessTrip.tripReport">
          暂时没有详细日程
        </span>
        <span v-else>
          <a @click="viewFile(2)" class="view-file">
            <i class="fa fa-search"></i>
            点击查看</a>
        </span>
      </div>
      <div  class="cell">
        <label>备注</label>
        <p v-text="businessTrip.remark"></p>
      </div>
    </div>
  </div>
</template>
<script>
  import fetch from '../../utils/fetch'
  import moment from 'moment'
  export default{
    data () {
      return {
        businessTrip: Object
      }
    },
    created(){
      this.handleGetTripInfo()
    },
    methods:{
      handleGetTripInfo(){
        let tripId = this.$route.params.tripId
        fetch('/api/business/trip/' + tripId + '/info').then(response =>{
          if(response.data.success) {
            this.businessTrip = response.data.obj
          }
        })
      },
      viewFile(type) {
        window.open('/api/business/trip/'+ this.businessTrip.id +'/'+ type +'/file')
      },
      formateDate(date) {
        return moment(date).format('YYYY-MM-DD')
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    .header{
      background: #26A2FF;
      min-height: 60px;
      display: block;
      padding: 20px;
      position: relative;
      margin-top: 40px;
      text-align: center;
      ::before{
        height: 40px;
        background: #26A2FF;
      }
      h2{
        color: #fff;
        @include fz(6px);
        font-weight: 700;
      }
      .trip-time{
        @include flex-left;
        margin-top: 20px;
        color: #fff;
        .time-text{
          flex: 1;
        }
        .status-text {

        }
      }
    }
    .content{
      .cell{
        border-bottom: 1px solid #dddee1;
        label{
          display: inline-block;
          @include fz(5px);
          color: #80848f;
          padding: 10px 0 10px 20px;
          width: 100px;
          &.right-label{
            border-left: 1px solid #dddee1;
          }
        }
        span {
          display: inline-block;
          @include fz(5px);
        }
      }
    }
  }
  .close-btn{
    position: absolute;
    padding:20px;
    top: -10px;
    right:0px;
    color: #80848f;
  }
</style>
